<template>
  <div class="introduceVideoBody">
    
    <div class="introBody removeUl">

      <ul class="navTabs" role="tablist">
          <li role="presentation" class="navItem">
              <a class="tabA" href="javascript:;" role="tab" data-toggle="tab" :title="siteName">
                  <span class="Aicon iconfont gongsi1 redDeepColor"></span> <span class="blackColor textTitle bold">关于我们</span>
              </a>

          </li>
          <li role="presentation" class="navItem">
              <a href="javascript:;" :title="siteName" class="tabA" role="tab" data-toggle="tab" @click="toVideoList">
                  <span class="blackColor textTitle bold">更多</span><span class="Aicon iconfont gengduo bigIcon redDeepColor"></span>
              </a>
          </li>

      </ul>
      <div class="contentInfo">
        <div class="companyIndexBox" >
            <div class="companyBox">
                <div class="topNav">{{siteName}}</div>
                <div class="navEng">XIN SHENG HE INTRODUCTION</div>
                <div class="companyBody">新疆新盛合环保设备有限公司是新疆新技术产业园区的企业，注册资金1600万，厂区占地面积5600平米，公司拥有一支从总经理、副总经理、技术、销售、售后等人员组成的优秀团队，主要从事玻璃钢制品设计、开发、生产制造，主要产品有:玻璃钢冷却塔、玻璃钢化粪池、玻璃钢管道、玻璃钢电缆管、标志桩、警示牌、净化塔、格栅、拉挤型材、风机等。
                    公司技术力量雄厚，具有先进的工艺技术、生产装备和完善的检测手段。多年来坚持走科研生产一体化的道路，以科技为先导，以质量为根本，以优质服务为保障。公司积极引进国内外先进技术和著名大学及设计科研院所的科研成果，从而确保了本公司的产品性能优良可靠。
                    公司将坚持严格管理，重合同，守信誉，努力开拓，朝着国际化、专业化的目标迈进，以产品合格率达到100%为宗旨，愿同广大朋友携手并进，共创辉煌。</div>
            </div>
            <div class="videoImgs" id="videoBody">
              <!-- <EmptyImg :width="'100%'" :height="'100%'" /> -->
                
                <!-- <img :src="videoHotList[0].videoCover" :alt="siteName" class="pane-img img-responsive">
                <div class="videoMask" @click="openVideo(videoHotList[0])">
                    <div class="iconfont shipin4 viewIcon"></div>
                </div> -->
              
                

            </div>

            
        </div>
      </div>

    </div>
    
  </div>
</template>

<script setup>

import { throwError } from 'element-plus/es/utils/error.mjs';
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css'

const $emit = defineEmits()
const isPlay=ref(true)

let siteInfo={}
let siteName='新盛合环保'
let videoHotList=ref([])

let {data,error} = await GetVideoHotList()

if(process.server && error.value){
  throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
}

if(data.value?.length>0){
  // console.log("video---：",data)
  videoHotList=data.value
  if(process.client){
    // console.log("videoHotList[0]: ",videoHotList[0])
    setTimeout(()=>{
      
      openVideo(videoHotList[0])
    })
  }
  
}

const toVideoList=()=>{
  navigateTo('/video/list/1')
}

const openVideo=(video)=>{
  console.log("video---：",video) // picCover  video
  // console.log("video.video: ",video.video)
  // console.log("videoCover: ",video.videoCover)
  const player = new Player({
         id: 'videoBody',
         // el: document.querySelector('#videoBody'),
        //  url: video.video, //v2使用url，v3必须指定视频格式，否则报错
         url: [
          {
            src: video.video,
            type: 'video/mp4'
          },
        ],
         poster:video.videoCover,
           controls: true, // true/false决定是否使用底部控制栏，
          miniprogress: true, // 是否使用mini进度条（当底部控制栏隐藏时生效）
         autoplay:false,
         loop:false,
         volume: {
            default: 0.6, // 默认音量0.6，
            showValueLabel: true // 是否在音量控制条顶部显示音量百分比
          },
          fitVideoSize: 'auto',

         width:'50%',
           height:'360px',

         lang: 'zh-cn',
         
         
         // fluid: true,//设置为流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化（播放器宽高未设置时按照内部默认值来计算）
         cssFullscreen: false,//全屏功能不会隐藏当前浏览器的标签栏，导航栏，只是在当前页面内部全屏显示
         /*videoFillMode：
         fillWidth 填充宽度，高度溢出则裁剪高度
          fillHeight 填充高度，宽度溢出则裁剪宽度
          fill 拉伸填充
          contain 保持宽高比，缩放至一边填满容器，另一边将添加“黑边”
          auto 默认值，同浏览器默认
         */
         videoFillMode:'fillHeight',
         // lastPlayTime: 20, //记忆播放：视频起播时间（单位：秒）
         // lastPlayTimeHideDelay: 5, //记忆播放：提示文字展示时长（单位：秒）

         // rotate: {   //视频旋转按钮配置项
         //     innerRotate: true, //只旋转内部video
         //     clockwise: false // 旋转方向是否为顺时针
         // },

         enableContextmenu:false,//播放器区域是否允许右键功能菜单
        //  screenShot: true, //显示截图按钮，这里不配置，需要查找一些资料，下面官方给的跨域不能实现
        // //Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
        //   videoAttributes: {
        //     crossOrigin: 'anonymous'
        //   },
         download:true,//是否使下载按钮，该配置项为下载按钮快捷启动配置
         playbackRate: [0.5, 0.75, 1, 1.5, 2],//播放倍速
         defaultPlaybackRate: 1,//播放倍速
         playbackRateUnit:'倍',//倍速单位
         mini: false, //开启小窗插件
         keyboard: true,
         keyCodeMap: {
           //禁用空格键切换播放/暂停
           'space': {
             disable: true
           },
           // 修改向上快捷键行为
           'up': {
             action: function () {
               console.log('当前是点击了快捷键38')
             }
           },
           // 修改快进行为触发的快捷键改为l键
           'left': {
             keyCode: 76
           },
           // 自定义一个快捷键操作
           'custom': {
             keyCode: 13,
             action: () => { //快捷键触发的时候执行该函数
               console.log('这是一个自定义快捷键操作，点击的是回车键')
             }
           },
           'custom2': {
             keyCode: 14,
             action: 'customAction2' // 插件内部没有customAction2的实现，需要结合事件下发自己实现具体功能
           },
         },
        //  danmu: {
        //      comments: [
        //         {
        //            duration: 15000,
        //            id: '1',
        //            start: 3000,
        //            txt: '新盛合的玻璃钢管道耐腐蚀性真强！',
        //            style: {  //弹幕自定义样式
        //               color: '#ff9500',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '2',
        //            start: 8000,
        //            txt: '玻璃钢化粪池在我们这也有很多需求，方便联系下吗？',
        //            style: {  //弹幕自定义样式
        //               color: '#1a7d9a',
        //               fontSize: '20px',
        //               // border: 'solid 1px #ff9500',
        //               // borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '3',
        //            start: 13000,
        //            txt: '一体化泵站包运输到单位吗？有运费吗？',
        //            style: {  //弹幕自定义样式
        //               color: '#f14e25',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //         {
        //            duration: 15000,
        //            id: '4',
        //            start: 3000,
        //            txt: '工厂有需求，麻烦联系下！',
        //            style: {  //弹幕自定义样式
        //               color: '#ff9500',
        //               fontSize: '20px',
        //               border: 'solid 1px #ff9500',
        //               borderRadius: '50px',
        //               padding: '5px 11px',
        //               backgroundColor: 'rgba(255, 255, 255, 0.1)'
        //            }
        //         },
        //      ],
        //      area: {
        //         start: 0,
        //         end: 1
        //      }
        //  },
         //播放器使用自执行的插件机制，如需要在插件生效前执行某些方法，开发者可将相关方法写在execBeforePluginsCall配置项数组中
         execBeforePluginsCall: [() => {
            console.log('Execute before plugins call')
            that.loading=false
         }
        ]
      });
}


</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
@import '@/assets/css/index.scss';

.introduceVideoBody{
  width: 100%;
  background-color: #fff;
  border-top:1px solid #ccc;
  margin-top: 10px;
  .introBody{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    
  }
}

/*热门视频*/
.navTabs {
  padding: 0 20px;
  border-bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  .navItem {
    cursor: pointer;
    &:hover{
      .textTitle{
        color: $blackActive;
      }
      .Aicon{
        color: $redActive;
      }
    }
    &:active{
      .textTitle{
        color: $blackActive;
      }
      .Aicon{
        color: $redActive;
      }
    }
    .tabA{
      font-size: 22px;
      .Aicon{
        margin: 0 5px;
        font-size: 22px;
        transition: 2s;
      }
      .bigIcon{
        // font-size: 24px;
        // padding-top: 23px;
        transition: 1s;
      }
      .textTitle{
        font-size: 20px;
      }
    }
  }
  
  
}

.contentInfo{
  width: 100%;
  display: flex;
  .companyIndexBox{
    width: 100%;
    display: flex;
    .companyBox{
      width: 50%;
      .topNav{
          /*margin-bottom: 20px;*/
          text-align: center;
          width: 100%;
          font-size: 28px;
          /*display: inline-block;*/
          font-weight: bold;
          background-image: -webkit-gradient(linear, left top, right top, from(#32beff), to(#005aab));
          background-image: -webkit-linear-gradient(left, #32beff 0%, #005aab 100%);
          background-image: -moz-linear-gradient(left, #32beff 0%, #005aab 100%);
          background-image: linear-gradient(to right, #32beff 0%, #005aab 100%);
          -webkit-background-clip: text;
          color: transparent;
          line-height: 30px !important;
      }
      .navEng{
          color: rgba(15, 35, 65, 0.2);
          text-align: center;
          font-family: Arial;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          /*line-height: 26px;*/
          letter-spacing: 10px;
          text-transform: uppercase;
          /*margin: 10px 0 45px;*/
          padding-left: 10px;
          line-height: 50px !important;
      }
      .companyBody{
          line-height: 30px !important;
          text-indent: 2rem;
          font-family: "Microsoft YaHei";
          color: #333;
          font-style: normal;
          font-weight: 400;
          opacity: 0.8;
          font-size: 18px;
      }

    } 
  }
  .videoImgs{
      width: 50%;
      max-height: 420px;
      position: relative;
      margin-left: 20px;
      margin-top: 15px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 2px 2px 20px 2px rgba($color: #bce0ee, $alpha: .4);
      .emptyVideo{
        // position: absolute;
        // left: 0;
        // bottom: 0;
      }
      img{
          object-fit: cover;
          width: 100%;
          height: 100%;
      }
      .videoMask{
        position: absolute;
        left: 0;
        top: 0;
        color: white;
        font-size: 50px;
        cursor: pointer;
        width: 100%;
        height: 100%;
       
        background-color: rgba(0,0,0,.2);
        .viewIcon{
            position: absolute;
            left: 42%;
            top: 40%;
            color: white;
            font-size: 90px;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
    }
  }
}


</style>